
Component({
  properties: {
    showType: { // 弹框出现的位置
      type: String,
      value: "bottom"
    },
    ststus: {
      type: Boolean,
      value: false,
      observer: 'init',
    },
  },
  data: {
    visible: false,
    showType: "",
    width: 0,
    height: 0,
    animation: null,
    animationData: null,

  },
  methods: {
    // 初始化
    init: function (newVal, oldVal, changedPath) {
      if (oldVal === false && newVal === true) {
        setTimeout(function () {
          this.onShow();
        }.bind(this), 0)
      }
    },
    // 展开动画
    onShow: function () {
      const _this = this;
      _this.setData({
        visible: false,
        animationData: null,
      })
      const showType = this.data.showType
      const query = wx.createSelectorQuery().in(this);
      query.select('#pop-up').boundingClientRect(function (res) {
        _this.setData({
          width: res.width,
          height: res.height
        })
        const { animation, height } = _this.data;
        if (showType == "top") {
          animation.translate(0, 0).step();
        } else if (showType == "bottom") {
          animation.translate(0, -height).step();
        } else if (showType == "left") {
          animation.translate(0, 0).step();
        } else if (showType == "right") {
          animation.translate(-0, 0).step();
        } else if (showType == "cenent") {
          // animation.translate(0, -0).step();
        }
        _this.setData({
          visible: true,
          animationData: animation.export(),
        })
      }).exec();
    },

    // 收起动画
    onCancel: function () {
      const _this = this;
      const { animation, showType, width, height } = this.data;
      if (showType == "top") {
        animation.translate(0, -height).step();
      } else if (showType == "bottom") {
        animation.translate(0, 0).step();
      } else if (showType == "left") {
        animation.translate(-width, 0).step();
      } else if (showType == "right") {
        animation.translate(width, 0).step();
      } else if (showType == "cenent") {
        // animation.translate(0, -0).step();
      }
      this.setData({
        visible: false,
        animationData: animation.export(),
      })
      _this.setData({
        visible: false,
        animationData: null,
      })
      setTimeout(function () {
        this.triggerEvent('onCancel');
      }.bind(this), 200)
    },
  },
  ready: function () {
    const showType = this.properties.showType
    const animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0,
    });
    this.setData({
      animation,
      showType
    })
  },
})